<!-- 积分明细 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="紫币明细" />
    <view class="list">
      <aster-cell
        v-for="(item, index) in list"
        :key="index"
        center
        :name="item.id"
        :border="false"
        :customStyle="customStyle"
        :title="item.title"
        :label="item.createTime"
        :value="getValue(item.changeType, item.changeCount)"
      />
      <uni-load-more :status="status" :content-text="contentText" @clickLoadMore="loadMore" />
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterCell from '@/components/common/aster-cell.vue';
  import { getCoinList } from '@/services/api/user/coin';
  import { PageParam } from '@/services/model/baseModel';
  import { CoinModel } from '@/services/model/coinModel';
  import { isEmpty } from '@/utils/is';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, ref } from 'vue';

  const customStyle = reactive({
    borderRadius: '20rpx',
    margin: '10rpx 0',
    backgroundColor: '#fff',
  });
  const pageParam = reactive<PageParam>({
    pageNum: 1,
    pageSize: 10,
    params: 'home',
  });
  const list = ref<CoinModel[]>([]);
  const statusList = ['more', 'loading', 'noMore'];
  const status = ref(statusList[0]);
  const contentText = reactive({
    contentdown: '点击查看更多',
    contentrefresh: '正在加载...',
    contentnomore: '没有更多数据了',
  });

  onLoad(() => {
    loadData(1);
  });

  const loadData = (pageNum?: number) => {
    pageParam.pageNum = pageNum ? pageNum : ++pageParam.pageNum;
    getCoinList(pageParam).then(({ data }) => {
      if (pageParam.pageNum == 1) {
        list.value = data.data;
      } else {
        list.value.push(...data.data);
      }
      if (isEmpty(data.data) || data.data.length < pageParam.pageSize) {
        status.value = statusList[2];
      } else {
        status.value = statusList[0];
      }
    });
  };

  const loadMore = (e: any) => {
    status.value = e.detail.status;
    loadData();
  };

  const getValue = (type: number, count: number) => {
    return type == 1 ? '-' + count : '+' + count;
  };
</script>
<style lang="scss" scoped>
  .list {
    padding: 20rpx;
  }
</style>
